<template>
  <div class="work1">
    <i-col span="24" style="margin-top: 8px" class="work-header">
      <div class="top_block change" style="width: 19%">
        <i-col span="8">
          <span class="touxiang">
            <div class="circle">
              <Avatar :src="head" size="large" />
            </div>
          </span>
        </i-col>
        <i-col span="16">
          <p>{{ realname }}，{{ time }}</p>
          <div class="time">{{ week }}</div>
          <div class="btn1 btn" @click="chrefLog">工作汇报</div>
          <div class="btn2 btn" @click="logout">注销</div>
        </i-col>
      </div>
      <!-- 所有角色都不给看，以防后面改动遂注释 by lxn 2021-0302 -->
      <!-- <div class="top_block change1"
           style="width: 13%;margin-right:5px;"
           v-if="isCity"
           @click="changeRouter('patrol-problem-count')">
        <img src="../../../static/img/home/circle.svg"
             class="float_img"
             height="55"
             width="56"
             alt="">
        <span>{{score}}</span>
        <p>本月考核分数</p>
        <div class="bgHui">
          <div class="more">
            <img src="../../../static/img/home/more.png"
                 class="more_img"
                 height="18"
                 width="18"
                 alt="">
            详情
          </div>
          <Icon type="chevron-right"
                style="margin:10px 15px 0 0"
                class="pull-right"></Icon>
        </div>
      </div> -->
      <div class="top_block change2" @click="changeRouter('wechat')">
        <img
          src="../../../static/img/home/jubao.svg"
          class="float_img"
          alt=""
        />
        <span>{{ reportNum }}</span>
        <p>待处理事件</p>
        <div class="bgHui">
          <div class="more">
            <img
              src="../../../static/img/home/more.png"
              class="more_img"
              height="18"
              width="18"
              alt=""
            />
            详情
          </div>
          <Icon
            type="chevron-right"
            style="margin: 10px 15px 0 0"
            class="pull-right"
          ></Icon>
        </div>
      </div>
      <div
        class="top_block change3"
        style="margin-right: 8px"
        @click="changeRouter('patrol')"
      >
        <img
          src="../../../static/img/home/eye.svg"
          height="55"
          width="53"
          class="float_img"
          alt=""
        />
        <span>{{ patrolNum }}</span>
        <p>本月巡查次数</p>
        <div class="bgHui">
          <div class="more">
            <img
              src="../../../static/img/home/more.png"
              class="more_img"
              height="18"
              width="18"
              alt=""
            />
            详情
          </div>
          <Icon
            type="chevron-right"
            style="margin: 10px 15px 0 0"
            class="pull-right"
          ></Icon>
        </div>
      </div>
      <div class="top_block change4" @click="changeRouter('water-quality')">
        <img
          src="../../../static/img/home/water.svg"
          class="float_img"
          alt=""
        />
        <span style="margin-right: 30px">{{ water }}</span>
        <p>水质合格率</p>
        <div class="bgHui">
          <div class="more">
            <img
              src="../../../static/img/home/more.png"
              class="more_img"
              height="18"
              width="18"
              alt=""
            />
            详情
          </div>
          <Icon
            type="chevron-right"
            style="margin: 10px 15px 0 0"
            class="pull-right"
          ></Icon>
        </div>
      </div>
      <div class="top_block change5" @click="changeRouter('major-project')">
        <img
          src="../../../static/img/home/project.svg"
          height="50"
          width="50"
          style="border-radius: 5px"
          class="float_img"
          alt=""
        />
        <span>{{ projectNum }}</span>
        <p>重点项目</p>
        <div class="bgHui">
          <div class="more">
            <img
              src="../../../static/img/home/more.png"
              class="more_img"
              height="18"
              width="18"
              alt=""
            />
            详情
          </div>
          <Icon
            type="chevron-right"
            style="margin: 10px 15px 0 0"
            class="pull-right"
          ></Icon>
        </div>
      </div>
    </i-col>
    <i-col span="24" style="margin-top: 12px">
      <Card class="chart_card">
        <p slot="title" class="change4">事件处理统计</p>
        <div class="chart"></div>
      </Card>
      <Card class="chart_card">
        <p slot="title" class="change4">河流事件统计</p>
        <div class="chart"></div>
      </Card>
      <Card class="chart_card" style="margin-left: 10px">
        <p slot="title" class="change4">app用户活跃情况</p>
        <div class="chart"></div>
      </Card>
    </i-col>
    <i-col span="24" style="margin-top: 12px">
      <Card class="chart_card">
        <p slot="title" class="change4">事件处理达标率</p>
        <div class="chart"></div>
      </Card>
      <Card class="chart_card">
        <p slot="title" class="change4">河流水质达标统计</p>
        <div class="chart"></div>
      </Card>
      <msg :types="false"></msg>
    </i-col>
    <Modal v-model="logModal" title="河长办工作汇报" width="800">
      <Tabs @on-click="changeTab">
        <TabPane label="新建工作汇报" name="新建工作汇报">
          <Form :model="logItem" :label-width="60">
            <Form-item label="标题" prop="title">
              <Select
                v-model="logItem.title"
                @on-change="showType"
                clearable
                class="width90"
              >
                <Option
                  v-for="item in taskData"
                  :value="item.title"
                  :key="item.title"
                  >{{ item.title }}</Option
                >
              </Select>
            </Form-item>
            <Form-item label="内容" prop="content">
              <Input
                type="textarea"
                :maxlength="500"
                v-model="logItem.content"
              ></Input>
            </Form-item>
            <Form-item label="类型" prop="content">
              <RadioGroup v-model="logItem.type">
                <Radio disabled label="双月汇报"></Radio>
                <Radio disabled label="年底汇报"></Radio>
              </RadioGroup>
            </Form-item>
          </Form>
        </TabPane>
        <TabPane label="我的工作汇报" name="我的工作汇报">
          <Table
            ref="table"
            :data="logData"
            :columns="logColumns"
            stripe
          ></Table>
          <Page
            class="pull-right"
            :total="Page.total"
            :current="Page.current"
            size="small"
            show-total
            @on-change="changePage"
          ></Page>
        </TabPane>
      </Tabs>
      <div slot="footer">
        <Button v-if="btnSave" type="primary" @click="newLog">确定</Button>
        <Button v-if="!btnSave" type="primary" @click="logModal = false"
          >确定</Button
        >
        <Button type="text" @click="logModal = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import echarts from 'echarts';
import { domain2 } from 'global/setting';
import {
  baseCircle,
  baseChart,
  createLineChart,
  createEfficiencyChart,
  createAppChart,
} from 'common/js/echart';
import msg from 'components/home/msg'; // 消息框组件
export default {
  data () {
    return {
      urlChartList: '/emergency/report/statnum',
      urlMsgList: '/sys/userlog/loglist',
      urlChartList2: '/emergency/report/statbycure',
      urlPatrolNum: '/emergency/patrol/count',
      urlReportNum: '/emergency/report/count',
      appChartList: '/waterlaw/checkin/rate',
      efficiencyList: '/emergency/report/statEffect',
      waterQualityList: '/rld/waterqulity/stat',
      urlProjectNum: '/bus/project/count',
      urlLogNew: '/bus/journal/new',
      urlLogList: '/bus/journal/myjournal',
      urlLogDel: '/bus/journal/del',
      urlTaskList: '/bus/journal/tasking',
      urlLogout: '/sys/userinfo/logout',
      urlScore: '/stat/chiefs/score',
      num: '',
      fall: false,
      fall1: false,
      reportNum: '',
      patrolNum: '',
      overview: '',
      btnSave: true,
      complete_opinion: '',
      solve_result: '',
      week: '',
      realname: '',
      time: '',
      head: '',
      water: '',
      projectNum: '',
      score: '', // 本月考核分数
      logItem: {
        type: '',
      },
      logData: [],
      logColumns: [
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '内容',
          key: 'content',
          width: 400,
        },
        {
          title: '类型',
          render: (h, params) => {
            if (params.row.type === '0') {
              return '双月汇报';
            } else if (params.row.type === '1') {
              return '年底汇报';
            } else {
              return '暂无数据';
            }
          },
        },
        {
          title: '操作',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.delLog(params.row);
                  },
                },
              },
              '删除'
            );
          },
        },
      ],
      logModal: false,
      Page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      taskData: [],
      isCity: false // 是否市级河长/河长办
    };
  },
  methods: {
    changeRouter (name) {
      this.$router.push(`/home/data/${name}`);
    },
    getData () {
      let params = {
        url: this.urlChartList,
        token: storage.session.get('token'),
        data: {},
        success: res => { },
      };
      let level = storage.session.get('level');
      let department = JSON.parse(storage.session.get('department'))[0];
      let xaxis = [];
      let confirm = [];
      let solve = [];
      if (level == '1') {
        params.data.name = department.city;
        params.success = res => {
          res.data.result.area.map(item => {
            xaxis.push(item.name);
            item.solve_num.map(items => {
              if (items.solve_is == '处理中') {
                confirm.push(items.num);
              }
            });
          });
          let legend = ['处理中'];
          let el = document.getElementsByClassName('chart')[0];
          baseChart(el, legend, confirm, xaxis, 'bar');
        };
      } else if (level == '2') {
        params.data.name = department.area;
        params.success = res => {
          res.data.result.town.map(item => {
            xaxis.push(item.name);
            item.solve_num.map(items => {
              if (items.solve_is == '处理中') {
                confirm.push(items.num);
              }
            });
          });
          let legend = ['处理中'];
          let el = document.getElementsByClassName('chart')[0];
          baseChart(el, legend, confirm, xaxis, 'bar');
        };
      } else if (level == '3') {
        params.data.name = department.town;
        params.success = res => {
          let row = res.data.result;
          let data = [];
          let legend = [];
          let el = document.getElementsByClassName('chart')[0];
          let title = '事件处理统计';
          if (row.solve_num.length != 0) {
            row.solve_num.map(item => {
              data.push({ value: item.num, name: item.solve_is });
              legend.push(item.solve_is);
            });
          } else {
            data.push({ value: 0, name: '处理中' });
            legend.push('处理中');
          }
          baseCircle(el, title, legend, data);
        };
      }
      ajaxPost(params);
    },
    getCircle () {
      let params = {
        data: {
          type: '河长办',
        },
        url: this.urlChartList2,
        token: storage.session.get('token'),
        success: res => {
          let el = document.getElementsByClassName('chart')[1];
          let data = [];
          let legend = [];
          res.data.result.map(item => {
            if (item._id == '1') {
              data.push({ value: item.num, name: '微信' });
              legend.push('微信');
            } else if (item._id == '2') {
              data.push({ value: item.num, name: '河长事件' });
              legend.push('河长事件');
            } else if (item._id == '3') {
              data.push({ value: item.num, name: '电话、邮件' });
              legend.push('电话、邮件');
            } else if (item._id == '4') {
              data.push({ value: item.num, name: '公众APP' });
              legend.push('公众APP');
            }
          });
          baseCircle(el, '投诉来源统计', legend, data);
        },
      };
      ajaxPost(params);
    },
    getReprotNum () {
      let that = this;
      let params = {
        data: {
          basis: 2,
          river_name: '测试河|#|ne',
          solve_is: '处理中|#|in',
          daiban: 1,
          addparam: true,
        },
        url: this.urlReportNum,
        token: storage.session.get('token'),
        success: res => {
          this.reportNum = res.data.result;
          this.$Message.info(`您的待处理事件还有${this.reportNum}条`);
        },
      };
      ajaxPost(params);
    },
    getPatrolNum () {
      let month = new Date().format('yyyy-MM');
      let params = {
        data: {
          month,
          basis: 2,
        },
        url: this.urlPatrolNum,
        token: storage.session.get('token'),
        success: res => {
          this.patrolNum = res.data.result;
        },
      };
      ajaxPost(params);
    },
    showSmallMap () {
      let center = new qq.maps.LatLng(23.009912294150357, 113.12484741210938);
      let map = new qq.maps.Map(document.getElementById('map'), {
        center,
        zoom: 16,
        disableDoubleClickZoom: false,
      });
    },
    logoutFuc () { // 退出登录调用此接口
      let params = {
        data: {},
        url: this.urlLogout,
        token: storage.session.get('token'),
        success: res => { },
      };
      ajaxPost(params);
    },
    logout () {
      if (storage.session.get('isOtherLoginType') === true) {
        let { origin, pathname } = window.location
        let backurl = `${origin}${pathname}#/logout`
        window.location.href = `
        https://xtbg.gdzwfw.gov.cn/zwrz/rz/sso/logout?client_id=zwrz_fshzzgl&backurl=${encodeURIComponent(backurl)}
        `
      }
      storage.remove('token');
      storage.remove('realname');
      storage.remove('roles');
      storage.remove('userid');
      storage.remove('username');
      storage.remove('position');
      storage.remove('head');
      storage.remove('level');
      storage.remove('dep_name');
      this.logoutFuc();
      this.$router.push('/login');
    },
    showPeople () {
      let now = new Date(),
        hour = now.getHours();
      if (hour < 6) {
        this.time = '凌晨好！';
      } else if (hour < 9) {
        this.time = '早上好！';
      } else if (hour < 12) {
        this.time = '上午好！';
      } else if (hour < 14) {
        this.time = '中午好！';
      } else if (hour < 17) {
        this.time = '下午好！';
      } else if (hour < 19) {
        this.time = '傍晚好！';
      } else if (hour < 22) {
        this.time = '晚上好！';
      } else {
        this.time = '夜里好！';
      }
      this.realname = storage.session.get('realname');
      let week = new Date().getDay();
      if (week == 0) {
        this.week = '今天是星期日';
      } else if (week == 1) {
        this.week = '今天是星期一';
      } else if (week == 2) {
        this.week = '今天是星期二';
      } else if (week == 3) {
        this.week = '今天是星期三';
      } else if (week == 4) {
        this.week = '今天是星期四';
      } else if (week == 5) {
        this.week = '今天是星期五';
      } else if (week == 6) {
        this.week = '今天是星期六';
      }
      this.head = domain2 + storage.session.get('head');
    },
    getAppdata () {
      let level = storage.session.get('level');
      let deps = JSON.parse(storage.session.get('department'))[0];
      let params = {
        data: {
          level,
        },
        url: this.appChartList,
        token: storage.session.get('token'),
        success: res => {
          let el = document.getElementsByClassName('chart')[2];
          createAppChart(res.data.result, el);
        },
      };
      if (level == '2') {
        params.data.name = deps.area;
      }
      if (level == '3') {
        params.data.name = deps.town;
        params.success = res => {
          let data = [];
          let legend = [];
          let el = document.getElementsByClassName('chart')[2];
          let title = 'app用户活跃情况';
          let row = res.data.result;
          let noCheck = parseInt(row.num) - parseInt(row.checknum);
          data.push({ value: row.checknum, name: '活跃人数' });
          data.push({ value: noCheck, name: '不活跃人数' });
          legend.push('活跃人数');
          legend.push('不活跃人数');
          baseCircle(el, title, legend, data);
        };
      }
      ajaxPost(params);
    },
    getEfficiency () {
      let level = storage.session.get('level');
      let deps = JSON.parse(storage.session.get('department'))[0];
      let params = {
        data: {
          level,
        },
        url: this.efficiencyList,
        token: storage.session.get('token'),
        success: res => {
          let el = document.getElementsByClassName('chart')[3];
          createEfficiencyChart(res.data.result, el);
        },
      };
      if (level == '2') {
        params.data.name = deps.area;
      }
      if (level == '3') {
        params.data.name = deps.town;
        params.success = res => {
          let data = [];
          let legend = [];
          let el = document.getElementsByClassName('chart')[3];
          let title = '事件处理达标率';
          legend.push('待处理数');
          legend.push('超时事件数');
          data.push({ value: res.data.result.num, name: '超时事件数' });
          data.push({ value: res.data.result.allnum, name: '待处理数' });
          baseCircle(el, title, legend, data);
        };
      }
      ajaxPost(params);
    },
    getWaterQuality () {
      let name = '佛山市';
      let params = {
        data: {
          page: 1,
          pageSize: 12,
        },
        url: this.waterQualityList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.water = res.data.result[res.data.result.length - 1].rate;
          let el = document.getElementsByClassName('chart')[4];
          let data = [];
          let xaxis = [];
          res.data.result.map(item => {
            xaxis.push(item._id);
            data.push(item.rate);
          });
          let legend = ['合格率'];
          baseChart(el, legend, data, xaxis, 'line');
        },
      };
      let deps = JSON.parse(storage.session.get('department'))[0];
      let level = storage.session.get('level');
      if (level == '2') {
        params.data.area = deps.area;
        name = deps.area;
      } else if (level == '3') {
        params.data.town = deps.town;
        name = deps.town;
      }
      ajaxPost(params);
    },
    getProjectNum () {
      let params = {
        data: {},
        url: this.urlProjectNum,
        token: storage.session.get('token'),
        success: res => {
          this.projectNum = res.data.result;
        },
      };
      ajaxPost(params);
    },
    newLog () {
      let type;
      if (this.logItem.type === '双月汇报') {
        type = '0';
      } else if (this.logItem.type === '年底汇报') {
        type = '1';
      }
      let task_no = '';
      this.taskData.map(item => {
        if (item.title === this.logItem.title) {
          task_no = item.task_no;
        }
      });
      let params = {
        data: {
          title: this.logItem.title,
          content: this.logItem.content,
          type,
          task_no,
        },
        url: this.urlLogNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '新增成功',
            });
            this.$Loading.finish();
            this.logModal = false;
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    changeTab (data) {
      if (data === '我的工作汇报') {
        this.getLogData('1');
        this.btnSave = false;
      } else {
        this.btnSave = true;
      }
    },
    getLogData (page) {
      let params = {
        data: {
          searchValue: {},
          page,
          pageSize: this.Page.pageSize,
          order: { date_time: -1 },
        },
        url: this.urlLogList,
        token: storage.session.get('token'),
        success: res => {
          this.logData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      ajaxPost(params);
    },
    chrefLog () {
      this.logModal = true;
      this.logItem.content = '';
      this.logItem.title = '';
      this.logItem.type = '';
      let params = {
        data: {},
        url: this.urlTaskList,
        token: storage.session.get('token'),
        success: res => {
          this.taskData = res.data.result;
        },
      };
      ajaxPost(params);
    },
    delLog (row) {
      let params = {
        data: {
          _id: row._id,
        },
        url: this.urlLogDel,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Message.success({
              content: '删除成功',
            });
            this.$Loading.finish();
            this.getLogData();
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    changePage (page) {
      this.getLogData(page);
    },
    showType (data) {
      this.taskData.map(item => {
        if (item.title === data) {
          if (item.type == '0') {
            this.logItem.type = '双月汇报';
          } else {
            this.logItem.type = '年底汇报';
          }
        }
      });
    },
    // 本月考核分数
    getScore () {
      let params = {
        data: {},
        url: this.urlScore,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.score = res.data.result;
          }
        },
      };
      ajaxPost(params);
    }
  },
  mounted () {
    let department = JSON.parse(storage.session.get('department'));
    let type = storage.session.get('type');
    let areas = [undefined, null, ''];
    let types = ['3', '4', '7', '8'];
    this.isCity = areas.includes(department[0].area) && types.includes(type) ? true : false;

    storage.session.set('isWork', false);

    // this.getScore(); // 暂不显示考核分数
    this.getData();
    this.getCircle();
    this.getPatrolNum();
    this.getReprotNum();
    // this.showSmallMap();
    this.showPeople();
    this.getAppdata();
    this.getEfficiency();
    this.getWaterQuality();
    this.getProjectNum();
  },
  components: {
    msg,
  },
};
</script>
<style lang="less">
.work1 {
  .top_block {
    cursor: pointer;
    position: relative;
    color: white;
    height: 130px;
    border-radius: 5px;
    border: 1px solid #154fd4;
    text-align: center;
    width: 16%;
    margin-left: 5px;
    float: left;
    box-shadow: 1px 1px 5px rgb(0, 59, 166, 0.75) inset;
    &:hover {
      border: 1px solid rgb(57, 181, 255, 0.75);
      background: #12419d;
    }

    .float_img {
      margin: 5% 0 0 5%;
      float: left;
    }
    span {
      float: right;
      margin-top: 5px;
      margin-right: 10%;
      font-size: 40px;
      color: #fdd158;
    }
    p {
      position: absolute;
      top: 60px;
      right: 10%;
      font-size: 14px;
    }
    .bgHui {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      position: absolute;
      top: 70%;
      width: 98%;
      left: 1%;
      background: #12295d;
      font-size: 14px;
      color: #3ac0ff;

      .more_img {
        margin-top: 10%;
        margin-right: 5px;
      }

      .more {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        float: left;
        margin-left: 10%;
      }
    }
  }
  .change {
    .touxiang {
      margin: 10px 0 0 10%;

      .circle {
        width: 90px;
        height: 90px;
        border: 1px dashed #009aff;
        border-radius: 45px;
      }
      span {
        margin-right: 5%;
      }
      .ivu-avatar-large {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 40px;
      }
    }
    p {
      position: static;
      font-size: 16px;
      text-align: left;
      text-indent: 25px;
      margin-top: 15px;
    }
    .time {
      font-size: 14px;
      color: #3ac0ff;
      font-size: 14px;
      text-align: left;
      text-indent: 25px;
      margin-top: 10px;
    }
    .ivu-btn-primary {
      span {
        font-size: 12px !important;
      }
    }
    .ivu-avatar-large {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 30px;
    }
    .btn {
      display: inline-block;
      width: 35%;
      height: 28px;
      line-height: 28px;
      border-radius: 5px;
      font-size: 14px;
    }
    .btn1 {
      background: linear-gradient(to right, #0072ff, #37b9ff);
      position: absolute;
      top: 80px;
      right: 55%;
      &:hover {
        color: #fdd158;
      }
    }
    .btn2 {
      position: absolute;
      top: 80px;
      right: 15%;
      background: linear-gradient(to right, #f10574, #f5726e);
      &:hover {
        color: #fdd158;
      }
    }
  }
  .ivu-card-head {
    margin: 10px;
    background: linear-gradient(
      to right,
      rgba(0, 114, 255, 1),
      rgba(0, 114, 255, 0)
    ) !important;
    border-radius: 4px;
    border: none;
    p {
      color: #fff !important;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .ivu-card-body {
    background: #102f6f !important;
  }
  .chart_card {
    width: calc(~'32% + 5px');
    margin-left: 8px;
    float: left;
    background: #13377b;
    border: 1px solid #154fd4;
    &:hover {
      border: 1px solid rgb(57, 181, 255, 0.75);
      .ivu-card-body {
        background: #12419d !important;
      }
    }
  }
  .chart {
    width: 100%;
    height: 278px;
  }
  .msg_card {
    margin-right: 1.5%;
    float: right;
    width: calc(~'32% + 11px');
    margin-left: 8px;
    height: 372px;
    overflow: hidden;
    background: #102f6f !important;
    border: 1px solid #154fd4;
    &:hover {
      border: 1px solid rgb(57, 181, 255, 0.75);
      .ivu-card-body {
        background: #12419d !important;
      }
    }

    .Msg-group {
      overflow-y: auto;
      overflow-x: hidden;
      height: calc(~'100vh - 223px');
      padding-bottom: 40px;

      .msg_list {
        border-bottom: 1px solid #cccccc;
        padding: 10px;
        cursor: pointer;
        p {
          font-size: 14px;
          color: #fff;
          font-weight: bold;
        }
        span {
          margin-top: 5px;
          display: inline-block;
          font-size: 12px;
          color: #3ac0ff;
        }
        .iconRight {
          padding-top: 15px;
          font-size: 25px;
        }
      }
    }
  }
}
@media screen and (max-width: 1798px) {
  .work1 .msg_card {
    width: calc(~'30% + 29px');
    margin-right: 0.5%;
  }
}
@media screen and (max-width: 1605px) {
  .work1 {
    .change {
      .time {
        text-indent: 10px;
      }
      p {
        text-indent: 10px;
      }
      .btn1 {
        right: 59%;
      }
    }
  }
}
@media screen and (max-width: 1605px) {
  .work1 {
    .change {
      .time {
        font-size: 12px;
      }
      p {
        font-size: 12px;
      }
    }
  }
}

// 首页头部
.work-header {
  display: flex;
  width: calc(96% + 40px);
  .top_block {
    flex: 1;
  }
}
</style>